<template>
    <div>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    label="日期"
                    width="300">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.examDate }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="考试标题"
                    width="300">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>时间: {{ scope.row.totalTime }}</p>
                        <p>分数: {{ scope.row.totalScore }}</p>
                        <p>说明: {{ scope.row.tips }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.description }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="400">
                <template slot-scope="scope">
                    <el-button @click="showUploadExam(scope.row)" type="success"
                               icon="el-icon-camera-solid" circle></el-button>
                    <el-button @click="showDeriveDrawer(scope.row)" type="primary" icon="el-icon-picture" circle></el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="tag"
                    label="标签"
                    width="300"
                    :filters="this.filtersData"
                    :filter-method="filterTag"
                    filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag
                            :type="'primary'"
                            disable-transitions>{{scope.row.source}}
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="padding-top: 15px"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page.sync="current"
                       :page-sizes="[1, 2, 3, 6, 15]"
                       :page-size="size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="this.total">
        </el-pagination>

        <el-dialog title="上传考卷"
                   :visible.sync="autoExamVisible"
                   width="30%">
            <el-upload
                    class="upload-demo"
                    :file-list="fileList"
                    show-file-list
                    list-type="picture"
                    :headers="{ 'Authorization': tokenStr }"
                    :before-upload="beforeAvatarUpload" action="">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button @click="autoExamVisible = false">取 消</el-button>
                <el-button type="primary" @click="upload">确 定</el-button>
            </span>
        </el-dialog>

        <el-drawer
                title="已提交答卷以及覆盖情况!"
                :visible.sync="deriveDrawer"
                v-if="deriveDrawer"
                direction="rtl"
                size="70%">
            <StudentAutoDerive :username="this.username" :curExamId="this.curExamId" ></StudentAutoDerive>
        </el-drawer>

    </div>

</template>


<script>
    import StudentAutoDerive from "../../components/student/StudentAutoDerive";
    export default {
        name: "StudentAutoExam",
        components: {
            StudentAutoDerive,
        },
        data() {
            return {
                username: JSON.parse(window.sessionStorage.getItem('user')).username,
                deriveDrawer: false,
                curExamId: null,
                tokenStr: localStorage.getItem('tokenStr'),
                formData: new FormData(),
                fileList: [],
                // 分页
                size: 6,
                current: 1,
                total: 0,
                // 过滤数据
                filtersData: null,
                tableData: [],
                formInline: {
                    "source": null,
                    "grade": null,
                    "className": null,
                    "enable": null,
                    "description": null,
                    "createId" : null
                },
                autoExamVisible: false, // 上传框显示控制
            }
        },
        created() {
            this.selectStudentExam();
            this.initFiltersData();
        },
        methods: {
            // 初始化过滤数据（该用户可选择课程）
            initFiltersData(){
                this.getRequest('/courseDistribution/studentSelectCourseName').then(resp => {
                    if (resp) {
                        this.filtersData = resp.data;
                    }
                })
            },
            beforeAvatarUpload(file) {
                let test = file.name.substring(file.name.lastIndexOf(".") + 1);
                const extension =
                    test === "jpg" ||
                    test === "JPG" ||
                    test === "png" ||
                    test === "PNG" ||
                    test === "bpm" ||
                    test === "BPM";
                const isLt50M = file.size / 1024 / 1024 < 10;
                if (!extension) {
                    this.$message({
                        message: "上传图片只能是jpg / png / bpm格式!",
                        type: "error"
                    });
                    return false; //必须加上return false; 才能阻止
                }
                // console.log(file);
                if (!isLt50M) {
                    this.$message({
                        message: "上传文件大小不能超过 10MB!",
                        type: "error"
                    });
                    return false;
                }
                this.fileList.push(file);
                return extension || isLt50M;
            },
            upload() {
                for (let i = 0; i < this.fileList.length; i++) {
                    this.formData.append("pictures", this.fileList[i]);
                }
                this.postRequest('/Oss/uploadImgFileList/' + this.curExamId, this.formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(resp => {
                    if (resp) {
                        this.dialogVisible = false;
                        this.fileList = [];
                    } else {
                        this.$message("失败了");
                    }
                })
                this.autoExamVisible = false;
            },
            showDeriveDrawer(row){
                this.deriveDrawer = true;
                this.curExamId = row.id;
            },
            showUploadExam(row) {
                console.log("row:->" + row.id);
                this.curExamId = row.id;
                // Object.assign(this.updateTableData,row);// 注意日期的格式
                this.autoExamVisible = true;
            },
            selectStudentExam() {
                this.postRequest('/exam/studentSelectExam/' + this.current + '/' + this.size, this.formInline).then(resp => {
                    // 看一下返回信息
                    console.log(this.formInline);
                    // alert(JSON.stringify(resp));
                    if (resp) {
                        this.tableData = resp.data.records;
                        this.total = resp.data.total;
                    }
                })
            },
            // 分页改变每页数量
            handleSizeChange(size) {
                this.size = size;
                this.selectStudentExam();
            },
            // 分页改变当前页数
            handleCurrentChange(current) {
                this.current = current;
                this.selectStudentExam();
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            resetDateFilter() {
                this.$refs.filterTable.clearFilter('date');
            },
            clearFilter() {
                this.$refs.filterTable.clearFilter();
            },
            formatter(row, column) {
                console.log(column);
                return row.source;
            },
            filterTag(value, row) {
                return row.source === value;
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            }
        }
    }
</script>

<style>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }
</style>